<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import inputtext from '@/components/inputs/inputtext.vue';
import inputradio from '@/components/inputs/inputradio.vue';
import inputnumber from '@/components/inputs/inputnumber.vue';
import { addResources,deleteResources,getResources } from '@/api/index'
import { useRoute } from 'vue-router';
const route =useRoute()
onMounted(()=>{
    console.log(route)
    getData()
})
// 初始化数据
const tableData:any[] = reactive([]);
const getData =async function(){
    let res =await getResources();
    tableData.length = 0;
    tableData.push(...res.data.data)
}
// 表格行选择记录
const selectRow:any[] = reactive([]);
const getSelectionRows = function(e:any){
    selectRow.length = 0
    console.log(e);
    selectRow.push(...e);
}

//#region  新增数据
import { FormInstance,FormRules } from 'element-plus'
const addshow = ref(false)
const formref = ref<FormInstance>()
interface FormType {
    id:number|null
    pid:number|null
    type:number|null
    menu_name:string|null
    menu_icon:string|null
    menu_path:string|null
    menu_level:number|null
    route_path:string|null
    route_name:string|null
    route_component:string|null
    route_meta_title:string|null
    route_meta_require_auth:number|null
    route_enabled:number|null
    route_keep_alive:number|null
    description:string|null
}
const form = reactive<FormType>({
    id:null,
    pid:null,
    type:null,
    menu_name:null,
    menu_icon:null,
    menu_path:null,
    menu_level:null,
    route_path:null,
    route_name:null,
    route_component:null,
    route_meta_title:null,
    route_meta_require_auth:null,
    route_enabled:null,
    route_keep_alive:null,
    description:null,
})

const rules = reactive<FormRules>({
    menu_name:[
        {required:true,message:'必填',trigger:'blur'}
    ],
    type:[
        {required:true,message:'必填',trigger:'blur'}
    ],
})

const addData =async function(formref:FormInstance|undefined){
    if(!formref) return;
    await formref.validate((valid,fields)=>{
        if(valid){
            console.log('严重通过')
            addResources({...form}).then(res=>{
                console.log(res.data);
                addshow.value = false
                getData();
            })
        }else{
            console.log('error',fields);
        }
    })
}

//#endregion


//#region 修改
const updateData = function(id:string|number){
    console.log(id)
}
//#endregion

//#region  批量删除
const deleteDatas = function(){
    let id_arr = [];
    for(let i = 0;i<selectRow.length;i++){
        id_arr.push(selectRow[i].id)
    }
    deleteResources(id_arr.toString()).then((res:any)=>{
        console.log(res);
        getData()
    })
}
//#endregion

//#region 单条删除
const deleteData = function(id:string|number){
    deleteResources(id).then(res=>{
        console.log(res)
        getData()
    })
}
//#endregion


</script>

<template>
    <div class="menuresource">
        <div class="tablebtn">
            <el-button size="small" type="primary" @click="addshow = true" >新增</el-button>
            <el-button size="small" type="danger" @click="deleteDatas" disabled>批量删除</el-button>
        </div>
        <div style="width: 100%;height: calc(100% - 70px);display: flex;">
            <el-table
            ref = 'eltable'
            :data="tableData" 
            style="width: 100%;height: 100%;"
            stripe 
            border 
            highlight-current-row 
            @selection-change="getSelectionRows"
            table-layout="auto"
            fit
            size="small"
            >
                <el-table-column fixed type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="pid" label="父id" align="center"></el-table-column>
                <el-table-column prop="menu_name" label="菜单/按钮名称" align="center"></el-table-column>
                <el-table-column prop="menu_icon" label="菜单/按钮图标" align="center">
                    <template #default="scope">
                        <el-icon style="font-size: 15px;" v-if="scope.row.menu_icon">
                            <component :is="scope.row.menu_icon" ></component>
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="menu_path" label="菜单导航路径" align="center"></el-table-column>
                <el-table-column prop="menu_level" label="菜单/按钮顺序" align="center"></el-table-column>
                <el-table-column prop="route_path" label="路由导航路径/按钮代码" align="center"></el-table-column>
                <el-table-column prop="route_name" label="路由名称" align="center"></el-table-column>
                <el-table-column prop="route_component" label="路由组件路径" align="center"></el-table-column>
                <el-table-column prop="route_meta_title" label="页面标题" align="center"></el-table-column>
                <el-table-column prop="route_meta_require_auth" label="是否要求授权" align="center">
                    <template #default="scope">
                        <el-button disabled size="small" :type="scope.route_meta_require_auth == 1?'primary':'warning'">
                        {{ scope.row.route_meta_require_auth == 1?'启用':'禁用'  }}
                        </el-button>
                    </template> 
                </el-table-column>
                <el-table-column prop="route_enabled" label="是否启用路由/按钮" align="center">
                    <template #default="scope">
                        <el-button disabled size="small" :type="scope.route_enabled == 1?'primary':'warning'">
                        {{ scope.row.route_enabled == 1?'启用':'禁用'  }}
                        </el-button>
                    </template> 
                </el-table-column>
                <el-table-column prop="route_keep_alive" label="是否缓存路由" align="center">
                    <template #default="scope">
                        <el-button disabled size="small" :type="scope.route_keep_alive == 1?'primary':'warning'">
                        {{ scope.row.route_keep_alive == 1?'启用':'禁用'  }}
                        </el-button>
                    </template> 
                </el-table-column>
                <el-table-column prop="description" label="资源描述"  align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template #default="scope">
                        <el-button size="small" @click="updateData(scope.row.id)" disabled>修改</el-button>
                        <el-button size="small" @click="deleteData(scope.row.id)" disabled> 删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tablepag" v-if="false">
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :total="50"
                class="mt-4"
            />
        </div>

        <el-dialog v-model="addshow" draggable>
            <template #header>新增</template>
            <el-form :model="form" :rules="rules" ref="formref" label-width="150">
                <inputnumber v-model="form.pid" prop="pid" label="父ID"></inputnumber>
                <inputradio v-model="form.type" prop="type" label="类型" :radio="[{label:1,text:'菜单'},{label:2,text:'按钮'}]"></inputradio>
                <inputtext v-model.trim="form.menu_name" prop="menu_name" label="菜单/按钮名称"></inputtext>
                <inputtext v-model.trim="form.menu_icon" prop="menu_icon" label="菜单/按钮图标"></inputtext>
                <inputtext v-model.trim="form.menu_path" prop="menu_path" label="菜单导航路径"></inputtext>
                <inputnumber v-model="form.menu_level" prop="orders" label="菜单/按钮顺序"></inputnumber>
                <inputtext v-model="form.route_path" prop="route_path" label="路由导航路径"></inputtext>
                <inputtext v-model="form.route_name" prop="route_name" label="路由名称"></inputtext>
                <inputtext v-model="form.route_component" prop="route_component" label="路由组件路径"></inputtext>
                <inputtext v-model="form.route_meta_title" prop="route_meta_title" label="页面标题"></inputtext>
                <inputradio v-model="form.route_meta_require_auth" prop="route_meta_require_auth" label="权限控制" :radio="[{label:1,text:'启用'},{label:2,text:'禁用'}]"></inputradio>
                <inputradio v-model="form.route_keep_alive" prop="route_keep_alive" label="页面缓存控制" :radio="[{label:1,text:'启用'},{label:2,text:'禁用'}]"></inputradio>
                <inputradio v-model="form.route_enabled" prop="route_enabled" label="路由控制" :radio="[{label:1,text:'启用'},{label:2,text:'禁用'}]"></inputradio>
                <inputtext v-model="form.description" prop="description" label="描述"></inputtext>
            </el-form>
            <template #footer>
                <el-button @click="addData(formref)">确定</el-button>
                <el-button @click="addshow = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.menuresource{
    width: 100%;
    height: 100lvh;
    overflow: hidden;
}
.tablebtn{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    background:rgba(123,123,123,0.2);
    padding-left:20px;
    box-sizing: border-box;
}
.tablepag{
    width:100%;
    height:30px;
    background:rgba(123,123,123,0.2);
    display:flex;
    align-items:center;
    justify-content: center;
}
</style>